import { ReactNode } from 'react';
import { createBrowserHistory } from 'history';
import { Router as ReactRouter } from 'react-router';
import Debug from 'debug';
import { Modal } from 'antd-mobile';

const debug = Debug(module.id);

export const history = createBrowserHistory({
  getUserConfirmation: (message, callback) => {
    debug(`getUserConfirmation called in BrowserRouter`);
    if (Modal) {
      Modal.confirm({ content: message }).then(result => callback(result));
    } else {
      // this is the default behavior
      const allowTransition = window.confirm(message);
      callback(allowTransition);
    }
  }
});

export function Router(props: {
  children: ReactNode,
}) {
  return <ReactRouter history={history} {...props} />;
}
